<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>添加商品</span>
      </div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="form.cateName"></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-select v-model="selectvalue" placeholder="请选择商品分类">
            <el-option
              v-for="item in categories"
              :key="item.cateName"
              :label="item.cateName"
              :value="item.cateName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input-number v-model="price" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="添加图片">
          <el-upload
            :action="UPLOAD_IMG"
            list-type="picture-card"
            :on-success="uploadfinsh"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input type="textarea" v-model="form.itemInfo"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="clickAddItem">添加商品</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { categories, UPLOAD_IMG, goodsAdd } from "../../../../api/apis";
export default {
  data() {
    return {
      form: {
        cateName: "", //商品名称
        itemInfo: "", //商品描述
      },
      price: 0, //商品价格
      categories: [], //商品的分类数组
      selectvalue: "", //商品分类
      UPLOAD_IMG: "", //商品图片上传接口
      imgUrl: "", //获取自己上传的图片
    };
  },
  methods: {
    //添加商品按钮
    clickAddItem() {
      goodsAdd({
        name: this.form.cateName, //商品名称
        category: this.selectvalue, //商品分类
        price: this.price, //商品价格
        imgUrl: this.imgUrl, //商品图片地址
        goodsDesc: this.form.itemInfo, //商品描述
      }).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            message: "美团系统提示：添加商品成功",
            type: "success",
          });
        }
      });
    },
    uploadfinsh(res) {
      if (res.code == 0) {
        //获取上传成功到服务器的图片
        this.imgUrl = res.imgUrl;
      }
    },
  },
  created() {
    this.UPLOAD_IMG = UPLOAD_IMG; //引用API封装的ip地址
    // 调用接口函数
    categories().then((res) => {
      this.categories = res.data.categories;
      // 设置默认选项值
      this.selectvalue = res.data.categories[0].cateName;
    });
  },
};
</script>
<style lang="less" scoped>
.el-form {
  width: 500px;
}
</style>